<!DOCTYPE html>
<html>
<head>
    <title>首页 {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}"/>
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head"/>

    <link href="__TMPL__/public/assets/simpleboot3/themes/simpleboot3/bootstrap.min.css" rel="stylesheet">
    
    <link href="__TMPL__/public/assets/css/tube.css" rel="stylesheet">
    <link href="__TMPL__/public/assets/css/posted.css" rel="stylesheet">

    <hook name="before_head_end"/>
</head>
<body class="body-white" style="background: #ECEEEE;">
<include file="public@nav_new"/>

<div class="tube_left pad-left_right">
    <!--  我的应用左侧 -->
    <div class="col-sm-2 pad-left_right tube-left1">
    <a href="{:cmf_url('user/tube/index')}">
        <div class="col-sm-12 tube-lgs tube-bgs"><i class="fa"><img src="__TMPL__/public/assets/images/summarya.png"></i><span>概述</span></div>
    </a>
    <a href="/user/profile/center.html">
        <div class="col-sm-12 tube-lyy tube-bgs"><i class="fa"><img src="__TMPL__/public/assets/images/me.png"></i><span>个人中心</span></div>
    </a>
    <!-- <a href="/portal/index/posted">
        <div class="col-sm-12 tube-lyy tube-bgs"><i class="fa fa-plus-circle"></i><span>发布应用</span></div>
    </a> -->
    <a href="/portal/posted/index">
        <div class="col-sm-12 tube-lyy tube-bgs"><i class="fa"><img src="__TMPL__/public/assets/images/publish.png"></i><span>内测分发应用</span></div>
    </a>
    <a href="/portal/posted/supindex">
        <div class="col-sm-12 tube-lyy tube-bgs"><i class="fa"><img src="__TMPL__/public/assets/images/qianming1.png"></i><span>超级签名应用</span></div>
    </a>
    <a href="/user/certificate/index">
        <div class="col-sm-12 tube-lyy tube-bgs"><i class="fa"><img src="__TMPL__/public/assets/images/summary.png"></i><span>证书管理</span></div>
    </a>
    <!--todo 暂时没想好什么作用-->
    <!--    <a href="/user/tube/editor/id/0.html">-->
    <!--        <div class="col-sm-12 tube-lyy tube-bgs"><i class="fa fa-plus-circle"></i><span>发布空应用</span></div>-->
    <!--    </a>-->
    <div class="col-sm-12 tube-bor"></div>
    
</div>
<style type="text/css">
    .paysup-right{
        width: 79%;
        float: left;
        margin-left: 4%;
        margin-top: 100px;
    }
    .pay-s{
        color: #3BCDAE;
    }
    .paysup-right-top{
        columns: #666;
    }
    .paysup-right-bottom{
        width:95%;
        height:600px;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 17px 0px rgba(0, 0, 0, 0.07);
        border-radius:10px;
        margin-top: 20px;
        overflow: hidden;
    }
    .paysup-right-bottom-top{
        font-size: 16px;
        font-weight: bold;
        margin-top: 2%;
        margin-left: 4%;
    }
    .paysup-right-bottom-form{
        margin-left: 12%;
        margin-top: 2%;
    }
    .paysup-right-bottom-form-a{
        width: 100%;
        height: 60px;
    }
    .paysup-right-bottom-form-a-l{
        float: left;
        font-size: 16px;
        width: 100px;
        line-height: 30px;
    }
    .paysup-right-bottom-form-a-r{
        float: left;
        font-size: 16px;
        font-weight: bold;
    }
    .paysup-right-bottom-form-b-a{
        float: left;
    }
    .private{
        cursor: pointer;
    }
    .public{
        cursor: pointer;
    }
    .private-notice{
        position: absolute;
        width: 260px;
        
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 17px 0px rgba(0, 0, 0, 0.07);
        border-radius:10px;
        padding: 5px 7px;
        display: none;
    }
    .public-notice{
        position: absolute;
        width: 260px;
        
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 17px 0px rgba(0, 0, 0, 0.07);
        border-radius:10px;
        padding: 5px 7px;
        margin-left: 100px;
        display: none;
    }
    .paysup-right-bottom-form-b-num{
        font-size: 24px;
        color: #3BCDAE;
    }
    .paysup-button{
        width: 120px;
        height: 45px;
        background-color: #3BCDAE;
        border: none;
        border-radius: 4px;
        color: #fff;
        margin-top: 30px;
    }
    .paysup-right-bottom-form-b-b{
        display: none;
    }
    .super-czxy{
        margin-left: 100px;
    }
    .super-czxy  a{
        text-decoration: none;
    }
</style>   
<div class="paysup-right">
    <div class="paysup-right-top">超级签名 > <span class="pay-s">购买设备量</span></div>
    <div class="paysup-right-bottom">
        <div class="paysup-right-bottom-top">购买设备量</div>
        <div class="paysup-right-bottom-form">
            <div class="paysup-right-bottom-form-a">
              <div class="paysup-right-bottom-form-a-l">产品名称：</div>  
              <div class="paysup-right-bottom-form-a-r">ios专属签名</div>
            </div>
            <form class="js-ajax-form" action="{:url('portal/Posted/pay_super')}" method="post">
                <div class="paysup-right-bottom-form-a">
                    <div class="paysup-right-bottom-form-a-l">签名类型：</div>
                    <div class="paysup-right-bottom-form-b-a">
                        <label>
                            <input type="radio" name="type" value="2"> 私有池
                            <img class="private" width=15 height="15" src="__TMPL__/public/assets/images/question.png">
                        </label>
                        <div class="private-notice">
                            使用个人账号池给已上传并选择使用私有池的应用进行签名服务（私有池需自行上传证书）以签名次数为计费方式，若将应用切换至公有池，签名会以公有池计费方式重新计费。
                        </div>
                        <label>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </label>
                        <label>
                            <input type="radio" name="type" value="1" checked> 公有池
                            <img class="public" width=15 height="15" src="__TMPL__/public/assets/images/question.png">
                        </label>
                        <div class="public-notice">
                            使用个人账号池给已上传并选择使用公有池的应用进行签名服务；以签名次数为计费方式，若将应用切换至私有池，签名会以私有池计费方式重新计费。
                        </div>
                    </div>
                  
                </div>
                <div class="paysup-right-bottom-form-a">
                    <div class="paysup-right-bottom-form-a-l">购买数量：</div>
                    <div class="paysup-right-bottom-form-b-a paysup-right-bottom-form-b-c">
                        
                        <foreach name="public" id="val" key="k">
                            <label>
                                <input class="public{$k}" data-num="{$val.coin}" type="radio" name="num" value="{$val['id']}" <if condition="$k eq 0">checked</if>> {$val['num']}次
                                &nbsp;&nbsp;
                            </label>
                        </foreach>
                    </div>
                    <div class="paysup-right-bottom-form-b-a paysup-right-bottom-form-b-b">
                        
                        <foreach name="private" id="val" key="k">
                            <label>
                                <input class="private{$k}" data-num="{$val.coin}" type="radio" name="num" value="{$val['id']}"> {$val['num']}次
                                &nbsp;&nbsp;
                            </label>
                        </foreach>
                    </div>
                </div>
                <div class="paysup-right-bottom-form-a">
                    <div class="paysup-right-bottom-form-a-l">支付方式：</div>
                    <div class="paysup-right-bottom-form-b-a">
                        <label>
                            <input type="radio" name="pay_type" value="1" checked> 
                            &nbsp;&nbsp;
                            <img src="__TMPL__/public/assets/images/zhifubao.png">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </label>
                        
                        <label>
                            <input type="radio" name="pay_type" value="2" > 
                            
                            &nbsp;&nbsp;
                            <img src="__TMPL__/public/assets/images/weixin.png">
                        </label>
                    </div>
                </div>
                <div class="paysup-right-bottom-form-a">
                    <div class="paysup-right-bottom-form-a-l">应付金额：</div>
                    <div class="paysup-right-bottom-form-b-a">
                        <p class="paysup-right-bottom-form-b-num">{$coin|default='0'}元</p>
                        <input type="hidden" name="coin" value="{$coin|default='0'}">
                    </div>
                </div>
                <div class="paysup-right-bottom-form-a">
                    
                    <div class="super-czxy">
                        <input type="checkbox" name="czxy" checked>
                        <a onclick="window.open('/portal/article/index/id/1')">超级签名充值协议</a>
                        
                    </div>
                        
                </div>
                <div class="paysup-right-bottom-form-a">
                    <div class="paysup-right-bottom-form-a-l">&nbsp;</div>
                    <div class="paysup-right-bottom-form-b-a">
                        <button type="button" class="paysup-button js-ajax-submit">立即支付</button>
                    </div>
                </div>
            </form>
            <label>
                
            </label>
        </div>
    </div>
</div>
    <include file="public@scripts"/>
    <link rel="stylesheet" href="__STATIC__/js/layui/css/layui.css" media="all">
    <script src="__STATIC__/js/layui/layui.js"></script>
    
    <hook name="before_body_end"/>
</body>

</html>
<script type="text/javascript">
    $('.private').mouseover(function(){
        $('.private-notice').css('display','block');
    })
    $('.private').mouseout(function(){
        $('.private-notice').css('display','none');
    })

    $('.public').mouseover(function(){
        $('.public-notice').css('display','block');
    })
    $('.public').mouseout(function(){
        $('.public-notice').css('display','none');
    })

    $('input[name="num"]').click(function(){
        var num = $(this).attr('data-num');
        $('.paysup-right-bottom-form-b-num').text(num+'元');

        $('input[name="coin"]').val(num);
    })

    $("input[name='type']").click(function(){
        var types= $("input[name='type']:checked").val();
        if(types==2){
            $('.paysup-right-bottom-form-b-c').css('display','none');
            $('.paysup-right-bottom-form-b-b').css('display','block');
            var v = $('.private0').val();
            $("input[name=num][value="+v+"]").attr("checked",true);
            var num = $("input[name='num']:checked").attr('data-num');
            $('.paysup-right-bottom-form-b-num').text(num+'元');
            $('input[name="coin"]').val(num);
        }else{
            $('.paysup-right-bottom-form-b-c').css('display','block');
            $('.paysup-right-bottom-form-b-b').css('display','none');
            var v = $('.public0').val();
            $("input[name=num][value="+v+"]").attr("checked",true);
            var num = $("input[name='num']:checked").attr('data-num');
            $('.paysup-right-bottom-form-b-num').text(num+'元');
            $('input[name="coin"]').val(num);
        }
    })

    $('.paysup-button').click(function(){
        //var formdata = new FormData('form');
        //var id = $('input[name="num"]').val();
        //var date = $('form').serialize();
        var czxy = $("input[name='czxy']:checked").val();
        if(czxy != 'on'){
            alert('请同意签名充值协议！');
            return;
        }
        var id = $("input[name='num']:checked").val();
        var type = $("input[name='type']:checked").val();
        var pay_type = $("input[name='pay_type']:checked").val();
        var coin = $("input[name='coin']").val();
        var data = new Array();
        data['id'] = id;
        data['type'] = type;
        data['pay_type'] = pay_type;
        data['coin'] = coin;
        buy(id,type,pay_type,coin);
        //console.log(data);
    });

    function GetDateNow() {
        var vNow = new Date();
        var sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        return sNow;
    }

    function buy(did,type,pay_type,coin) {
        //log(GetDateNow());
        //return false;
        $.ajax({
            url: '/portal/posted/pay_super',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                id: did,
                type: type,
                pay_type: pay_type,
                //d_gift: gift,
                coin: coin,
                order_id: GetDateNow()
            },
            timeout: 5000,    //超时时间
            dataType: 'html',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
                log(xhr)
                log('发送前')
            },
            success: function (data, textStatus, jqXHR) {

                $("body").append(data);
                log(data)
                //log(textStatus)
                //log(jqXHR)
            },
            error: function (xhr, textStatus) {
                log('错误')
                //log(xhr)
                //log(textStatus)
            },
            complete: function () {
                log('结束')
            }
        });
    }
</script>
